<template>
  <div>
    <span>用户名</span><input v-model="username" type="text" /><br />
    <span>密码</span><input v-model="pasd" type="password" /> <br />
    <span>来自哪里?</span>
    <select v-model="sele" name="" id="">
      <option value="请选择">请选择</option>
      <option value="北京">北京西</option>
      <option value="上海">上海男</option>
      <option value="广州">广州东</option></select
    ><br />
    <div>
      <span>爱好:</span>
      <input v-model="hobby" value="吸烟" type="checkbox" />吸烟
      <input v-model="hobby" value="喝酒" type="checkbox" />喝酒
      <input v-model="hobby" value="烫头" type="checkbox" />烫头<br />
    </div>
    <div>
      <span>性别:</span>
      <input v-model="abc" value="男" name="sex" type="radio" />男
      <input v-model="abc" value="女" name="sex" type="radio" />女
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pasd: "",
      sele: "",
      hobby: [], // v-model 用在复选框时 非数组关联的时 checked 属性///数组关联的时value属性,v-model只获取 value的值
      abc: "",
    };
  },
};
</script>

<style>
</style>